<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<u-icon name="arrow-left" size="22" color="#303133" @click="goBack"></u-icon>
				<view class="search-input-wrapper">
					<u-input 
						placeholder="闪购一下 30分钟好货到手" 
						v-model="searchValue" 
						border="none"
						placeholderStyle="color: #999"
						@change="onSearchChange"
						@confirm="onSearch"
						clearable
						:customStyle="{
							backgroundColor: '#f5f5f5',
							borderRadius: '20px',
							height: '36px',
							fontSize: '14px',
							padding: '0 10px'
						}"
						suffixIcon="search"
						suffixIconStyle="color: #999"
					></u-input>
				</view>
				<text class="search-text" @click="onSearch">搜索</text>
			</view>
		</view>

		<!-- 筛选条件栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{ active: filterIndex === 0 }" @click="onFilterClick(0)">
				<text>综合排序</text>
				<u-icon v-if="filterIndex === 0" name="arrow-down" size="12" color="#fa436a"></u-icon>
			</view>
			<!-- <view class="filter-icon" @click="showFilterPopup">
				<u-icon name="list" size="16" color="#666"></u-icon>
			</view> -->
		</view>

		<!-- 商品条件展示 -->
		<!-- <view class="condition-bar">
			<view v-for="(item, index) in conditionItems" :key="index" class="condition-item">
				<text>{{ item.name }}</text>
				<text class="condition-price">{{ item.price }}</text>
			</view>
		</view> -->

		<!-- 商家列表 -->
		<view class="merchant-list">
			<view v-for="(merchant, index) in merchantList" :key="index" class="merchant-item" @click="goToMerchant(merchant)">
				<!-- 商家头部信息 -->
				<view class="merchant-header">
					<view class="merchant-info">
						<image class="merchant-logo" :src="merchant.logo" mode="aspectFill"></image>
						<view class="merchant-details">
							<view class="merchant-name-row">
								<text class="merchant-name">{{ merchant.name }}</text>
								<view class="delivery-tag" v-if="merchant.isOfficial">
									<text>美团专送</text>
								</view>
							</view>
							<view class="merchant-meta">
								<text class="delivery-info">起送¥{{ merchant.minOrder }} 免配送费</text>
								<text class="distance">{{ merchant.distance }} {{ merchant.deliveryTime }}</text>
							</view>
							<view class="merchant-stats">
								<text class="rating" v-if="merchant.rank">{{ merchant.area }}超市便利人气第{{ merchant.rank }}名</text>
								<text class="sales">{{ merchant.sales }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 优惠券信息 -->
				<view class="coupon-info" v-if="merchant.coupons && merchant.coupons.length > 0">
					<view v-for="(coupon, cIndex) in merchant.coupons" :key="cIndex" class="coupon-item">
						<text class="coupon-text">{{ coupon.text }}</text>
						<text class="coupon-link">领券</text>
					</view>
				</view>

				<!-- 商品展示 -->
				<view class="product-showcase">
					<view v-for="(product, pIndex) in merchant.products" :key="pIndex" class="product-item" @click.stop="goToProduct(product)">
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name">{{ product.name }}</text>
							<view class="product-price-row" v-if="product.price">
								<text class="current-price">第1件¥{{ product.price }}</text>
								<text class="original-price" v-if="product.originalPrice">第1件¥{{ product.originalPrice }}</text>
							</view>
							<view class="no-price" v-else>
								<text class="browse-text">点击浏览商品</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			searchValue: '',
			filterIndex: 0, // 当前选中的筛选项
			loadingType: 'more',
			conditionItems: [
				{ name: '【可食用冰】', price: '前3件¥2.5/件' },
				{ name: '【烤肠】台式', price: '¥2.8' },
				{ name: '【雪糕/冰激凌】', price: '¥4' },
				{ name: '【雪糕】光明', price: '¥4' }
			],
			merchantList: [],
			page: 1,
			hasMore: true
		};
	},
	onLoad() {
		this.loadMerchantData();
	},
	onReachBottom() {
		if (this.hasMore && this.loadingType !== 'loading') {
			this.loadMoreData();
		}
	},
	onPullDownRefresh() {
		this.refreshData();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		onSearchChange(value) {
			// 实时搜索可以在这里实现
			console.log('搜索值变化:', value);
		},
		onSearch() {
			if (!this.searchValue.trim()) {
				uni.showToast({
					title: '请输入搜索内容',
					icon: 'none'
				});
				return;
			}
			uni.showToast({
				title: `搜索: ${this.searchValue}`,
				icon: 'none'
			});
			// 这里可以调用搜索API
		},
		onFilterClick(index) {
			this.filterIndex = index;
			this.loadMerchantData();
		},
		showFilterPopup() {
			uni.showToast({
				title: '筛选功能开发中',
				icon: 'none'
			});
		},
		goToMerchant(merchant) {
			// 跳转到门店页面
			uni.navigateTo({
				url: `/pages/product/product?id=${merchant.id}&title=${encodeURIComponent(merchant.name)}`
			});
		},
		loadMoreData() {
			if (!this.hasMore) return;
			
			this.loadingType = 'loading';
			setTimeout(() => {
				// 模拟加载更多数据
				this.page++;
				if (this.page >= 3) {
					this.hasMore = false;
					this.loadingType = 'nomore';
				} else {
					this.loadingType = 'more';
				}
			}, 1000);
		},
		refreshData() {
			this.page = 1;
			this.hasMore = true;
			this.merchantList = [];
			this.loadMerchantData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		goToProduct(product) {
			// 跳转到商品详情页
			uni.navigateTo({
				url: `/pages/product/product?id=${product.id}&title=${product.name}`
			});
		},
		async loadMerchantData() {
			// 模拟数据，使用现有的图片资源
			this.merchantList = [
				{
					id: 1,
					name: '糖果喵精品超市（济南西站）',
					logo: '/static/temp/c1.png',
					isOfficial: true,
					minOrder: 12.9,
					distance: '1.1km',
					deliveryTime: '32分钟',
					area: '槐荫区',
					rank: 7,
					sales: '月售9999+',
					coupons: [
						{ text: '10减5配送费', type: 'delivery' },
					],
					products: [
						{
							id: 1,
							name: '步步升 南京板栗',
							image: '/static/temp/list1.jpg',
							price: '0.8',
							originalPrice: null
						},
						{
							id: 2,
							name: '【保温棉发】',
							image: '/static/temp/list2.jpg',
							price: '0.01',
							originalPrice: null
						},
						{
							id: 3,
							name: '【红牛Red】',
							image: '/static/temp/list3.jpg',
							price: '0.99',
							originalPrice: null
						},
						{
							id: 4,
							name: '小当家干吃面',
							image: '/static/temp/list4.jpg',
							price: '0.5',
							originalPrice: null
						}
					]
				},
				{
					id: 2,
					name: '旗鱼仓超市（济南西店）',
					logo: '/static/temp/c2.png',
					isOfficial: true,
					minOrder: 9.9,
					distance: '526m',
					deliveryTime: '31分钟',
					area: '槐荫区',
					rank: 5,
					sales: '月售9999+',
					coupons: [
						{ text: '39减3', type: 'discount' },
						{ text: '99减5', type: 'discount' },
						{ text: '10减5配送费', type: 'delivery' }
					],
					products: [
						{
							id: 5,
							name: '【青岛啤酒】',
							image: '/static/temp/list5.jpg',
							price: '4.55',
							originalPrice: null
						},
						{
							id: 6,
							name: '【青岛啤】',
							image: '/static/temp/list6.jpg',
							price: '22.9',
							originalPrice: null
						},
						{
							id: 7,
							name: '青岛啤酒 白啤',
							image: '/static/temp/list7.jpg',
							price: '8.5',
							originalPrice: null
						},
						{
							id: 8,
							name: '【糯米糯】好',
							image: '/static/temp/list8.jpg',
							price: '3.8',
							originalPrice: null
						}
					]
				},
				{
					id: 3,
					name: '尺肉惠·精品超市（济南西站）',
					logo: '/static/temp/c3.png',
					isOfficial: false,
					minOrder: 9.9,
					distance: '1.0km',
					deliveryTime: '44分钟',
					area: '',
					rank: null,
					sales: '月售8000+',
					coupons: [],
					products: [
						{
							id: 5,
							name: '【青岛啤酒】',
							image: '/static/temp/list5.jpg',
							price: '4.55',
							originalPrice: null
						},
						{
							id: 6,
							name: '【青岛啤】',
							image: '/static/temp/list6.jpg',
							price: '22.9',
							originalPrice: null
						},
						{
							id: 7,
							name: '青岛啤酒 白啤',
							image: '/static/temp/list7.jpg',
							price: '8.5',
							originalPrice: null
						},
						{
							id: 8,
							name: '【糯米糯】好',
							image: '/static/temp/list8.jpg',
							price: '3.8',
							originalPrice: null
						}
					]
				}
			];
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

// 搜索头部
.search-header {
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 999;

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;

		.search-input-wrapper {
			flex: 1;
			margin: 0 20rpx;
		}

		.search-text {
			color: #666;
			font-size: 28rpx;
			padding: 8rpx 16rpx;
		}
	}
}

// 筛选条件栏
.filter-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.filter-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;

		&.active {
			color: #fa436a;
		}

		text {
			margin-right: 8rpx;
		}
	}

	.filter-icon {
		margin-left: auto;
		padding: 10rpx;
	}
}

// 商品条件展示
.condition-bar {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 8rpx solid #f5f5f5;
	overflow-x: auto;
	white-space: nowrap;

	.condition-item {
		display: inline-flex;
		align-items: center;
		margin-right: 40rpx;
		font-size: 24rpx;
		color: #333;

		.condition-price {
			color: #fa436a;
			margin-left: 8rpx;
		}
	}
}

// 商家列表
.merchant-list {
	.merchant-item {
		background: #fff;
		margin-bottom: 16rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		margin: 0 20rpx 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
		transition: all 0.3s ease;

		.merchant-header {
			.merchant-info {
				display: flex;
				align-items: flex-start;

				.merchant-logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.merchant-details {
					flex: 1;

					.merchant-name-row {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.merchant-name {
							font-size: 32rpx;
							font-weight: 600;
							color: #333;
							margin-right: 16rpx;
						}

						.delivery-tag {
							background: #fa436a;
							color: #fff;
							font-size: 20rpx;
							padding: 4rpx 8rpx;
							border-radius: 4rpx;
						}
					}

					.merchant-meta {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						font-size: 24rpx;
						color: #666;

						.delivery-info {
							margin-right: 20rpx;
						}
					}

					.merchant-stats {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 8rpx;

						.rating {
							font-size: 24rpx;
							color: #ff6600;
							background: #fff3e0;
							padding: 4rpx 8rpx;
							border-radius: 4rpx;
						}

						.sales {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}

		.coupon-info {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			flex-wrap: wrap;

			.coupon-item {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				margin-bottom: 10rpx;

				.coupon-text {
					font-size: 24rpx;
					color: #fa436a;
					margin-right: 8rpx;
				}

				.coupon-link {
					font-size: 24rpx;
					color: #fa436a;
					border: 1rpx solid #fa436a;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}
			}
		}

		.product-showcase {
			display: flex;
			overflow-x: auto;
			margin-top: 20rpx;

			.product-item {
				flex-shrink: 0;
				width: 200rpx;
				margin-right: 20rpx;

				.product-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}

				.product-info {
					margin-top: 12rpx;

					.product-name {
						font-size: 24rpx;
						color: #333;
						display: block;
						margin-bottom: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.product-price-row {
						.current-price {
							font-size: 28rpx;
							color: #fa436a;
							font-weight: 600;
						}

						.original-price {
							font-size: 24rpx;
							color: #999;
							text-decoration: line-through;
							margin-left: 8rpx;
						}
					}

					.no-price {
						.browse-text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
}
</style>